<template>
  <div class="alarm-number-main-content" :style="{ '--bgColor1': numberData?.bgColor1, '--bgColor2': numberData?.bgColor2, '--bgColor3': numberData?.bgColor3, '--borderColor': numberData?.borderColor }">
    <div class="alarm-number-main-content-item" v-for="(item, index) of 2" :key="index">
      <div class="alarm-number-main-content-title">
        <span>{{ index === 0 ? '今日' : '累计' }}{{ numberData?.label }}</span>
        <span>环比&nbsp;{{ index === 0 ? (numberData?.todayYoy >= 0 ? '+' : '-')  : (numberData?.totalYoy >= 0 ? '+' : '-') }}{{ index === 0 ? numberData?.todayYoy : numberData?.totalYoy }}%</span>
      </div>
      <div class="alarm-number-main-content-content">
        <div class="alarm-number-main-content-item-number" v-for="(childItem, childIndex) of index === 0 ? numberData?.today?.slice(0, 3) : numberData?.total?.slice(0, 3)" :key="childIndex"><span>{{childItem}}</span></div>
        <span style="font-weight: bolder">,</span>
        <div class="alarm-number-main-content-item-number" v-for="(childItem, childIndex) of index === 0 ? numberData?.today?.slice(3, 6) : numberData?.total?.slice(3, 6)" :key="childIndex"><span>{{childItem}}</span></div>
        <span>{{numberData?.unit}}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import {defineProps, onMounted} from 'vue'

const props = defineProps({
  numberData: {
    type: Object,
    default: () => {}
  }
});

onMounted(() => {
})
</script>

<style scoped lang="less">
.common-background-clip {
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
.alarm-number-main-content {
  background: rgba(9,70,145,0.15);
  padding: 21px 11px;
  margin-top: 8px;
  .alarm-number-main-content-item {
    .alarm-number-main-content-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 15px;
      span:last-child {
        font-weight: bold;
        background: linear-gradient(to bottom, #FFFFFF, #E38319);
        .common-background-clip;
      }
    }
    .alarm-number-main-content-content {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      margin-top: 25px;
      div {
        background: linear-gradient(to bottom, var(--bgColor1), var(--bgColor2), var(--bgColor3));
        padding: 5px 7px;
        font-size: 35px;
        font-weight: bolder;
        border: 1px solid var(--borderColor);
        span {
          background: linear-gradient(to bottom, #FFFFFF, #A1ECEA);
          .common-background-clip;
        }
      }
      span {
        color: #55BBEB;
      }
      span:nth-of-type(1) {
        font-size: 30px;
      }
      span:nth-of-type(2) {
        font-size: 15px;
      }
    }
  }
  .alarm-number-main-content-item:last-child {
    margin-top: 20px;
  }
}
</style>